<template>
  <el-menu
    ref="domMenu"
    class="el-menu-vertical-demo"
    default-active="1"
    v-bind="$attrs"
    :background-color="backgroundColor"
    @select="select"
    @open="select"
    @close="select"
  >
    <!--递归调用，支持n级菜单 myMenu-->
    <my-sub-menu
      :current="current"
      :subMenu="menus"
      :dialogAddInfo="dialogAddInfo"
      :dialogModInfo="dialogModInfo"
    />
  </el-menu>
</template>

<script>
  // 模块菜单
  import { reactive, ref, watch, toRaw } from 'vue'
  import { ElMenu } from 'element-plus'
  // 状态
  import { state } from '@naturefw/nf-state'
  // 展示子菜单
  import mySubMenu from './menu-sub.vue'
  // 加载选中的文档
  import mdController from '../service/md.js'

</script>

<script setup>

  const props = defineProps({
    'background-color': {
      tyoe: String,
      default: '#ece5d9'
    }
  })
  const { loadDocById } = mdController()

  // 当前菜单、文档内容，菜单列表
  const { current, menuList } = state
  
  // 自动展开菜单用
  const domMenu = ref(null)
  

  const menus = reactive([])
  
  // 根据当前导航项ID，获取菜单列表
  watch(() => current.naviId, (id) => {
    const mm = menuList.find(item => item.naviId === id)
    menus.length = 0
    menus.push(...mm.menus)
    
    setTimeout(() => {
      domMenu.value.open(menus[0].menuId)
      current.menuId = menus[0].menuId
    }, 200)
  })
  
  // 二级菜单被选中
  const select = (index, indexPath) => {
    console.log('当前激活节点', index, indexPath)
    current.menuId = index

    const ver = current.ver
    loadDocById(index, ver).then((res) => {
      // 找到了文档
      Object.assign(current.docInfo, res)
    }).catch((res) => {
      // 没有文档
      Object.assign(current.docInfo, res)
    })
  }

</script>

<style>
  .el-menu-vertical-demo:not(.el-menu--collapse) {
    max-width: 320px;
    min-height: 400px;
  }
</style>
